<template>
	<div>
		<div class="search">
			<input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" />
		</div>
		<div class="search-content" ref="search" v-show="keyword">
			<ul>
				<li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">
					{{item.name}}
				</li>
				<li class="search-item border-bottom" v-show="hasNoData"> <!-- 为0才显示 -->
					没有找到匹配数据
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import Bscroll from 'better-scroll'	
import { mapState, mapMutations } from 'vuex'
export default{
  name: 'CitySearch',
  props: {
	  cities: Object
  },
  data () {
	  return {
		  keyword: '',
		  list: [],
		  timer: null
	  }
  },
  computed: {
	  hasNoData () {
		  return !this.list.length
	  }
  },
  methods: {
  	handleCityClick: function (city) {
  			this.changeCity(city)
  			this.$router.push('/')
  		},
  		...mapMutations(['changeCity'])
  	
  }, 
  watch: {
	  keyword () {
		  if (this.timer) {
			  clearTimeout(this.timer)
		  }
		  if (!this.keyword) {
			  this.list = []
			  return
		  }
		  this.timer = setTimeout(() =>{
			  const result = []
			  for (let i in this.cities) {
				  this.cities[i].forEach((value) => {
					  if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) >-1) {
						  result.push(value)
					  }
				  })
			  }
			  this.list = result
		  }, 100)
	  }
  },
  mounted () {
	this.scroll = new Bscroll(this.$refs.search, { mouseWheel: true, click: true, tap: true })
	
  }
}
</script>

<style scoped>
	.search-item{
		list-style-type:none;
		line-height: .62rem;
		padding-left: .2rem;
		color: #666;
		background: #fff;
	}
	.search{
		height: .72rem;
		background: #00bcd4;
		padding: 0 .1rem;
	}
	.search-input{
		height: .62rem;
		line-height: .62rem;
		width: 100%;
		text-align: center;
		border-radius: .06rem;
		color: #666;
		box-sizing: border-box;
		padding: 0 .1rem;
	}
	.search-content{
		position: absolute;
		z-index: 1;
		overflow: hidden;
		top: 79px;
		left: 0;
		right: 0;
		bottom: 0;
		background: #eee;
	}
	.search-content>ul{
		padding: 0;
		margin: 0;
	}
</style>